<template>
    <div class="header block">
        <div class="row">
            <div>
                <span>项目名称：</span>
                <span>{{ basicInfo.projectName }}</span>
                <span style="margin-left: 30px">派遣单位名称：</span>
                <span>{{ basicInfo.serveCompanyName }}</span>
                <span style="margin-left: 30px" >申请时间：</span>
                <span >{{ basicInfo.createTime }}</span>
            </div>
            <div>
                <span class="key">流程单号：</span>
                <span class="value">{{ basicInfo.flowCode }}</span>
            </div>
        </div>
        <div class="row basic">
            <div>
                <span class="">发薪金额：</span>
                <span class="value important"
                    >{{ basicInfo.totalMoney }}元</span
                >
                <span class="">停止发薪金额：</span>
                <span class="value important"
                    >{{ basicInfo.payStopTotalMoney }}元</span
                >
                <span class=" key-bold">实发金额：</span>
                <span class="value important key-bold"
                    >{{ basicInfo.payRealHairTotalMoney }}元</span
                >
                <span class="">发薪人数：</span>
                <span class="value">{{ basicInfo.peopleNum }}人</span>
                <span class="">已领人数：</span>
                <span class="value">{{ basicInfo.getSalaryCount }}人</span>
                <span class="">停止发薪人数：</span>
                <span class="value">{{ basicInfo.payStopCount }}人</span>

                <span class="">发薪备注 ：</span>
                <span class="value">{{ basicInfo.remarks }}</span>
            </div>
        </div>
    </div>
    <div class="container block">
        <div class="header">
            <div class="search">
                <input
                    type="text"
                    placeholder="请输入人员信息"
                    class="input search-input"
                    v-model="searchText"
                    @keydown.enter="search"
                />
                <button class="btn" @click="search">搜索</button>
                <button class="btn-white" @click="onReset">
                    重置
                </button>
                <el-select
                    v-model="salaryStatus"
                    filterable
                    placeholder="领薪状态筛选"
                    class="screen-i drop-down"
                    @change="handleCurrentChange"
                >
                    <el-option
                        :label="item.dictLabel"
                        :value="item.dictValue"
                        v-for="(item, index) in salaryStatusArr"
                        v-bind:key="index"
                        >{{ item.dictLabel }}</el-option
                    >
                </el-select>
            </div>
            <div class="download flex flex-ai-c flex-wrap">
                <button
                    class="btn-green download-btn"
                    @click="batchApplyBill"
                    style="width: 160px"
                >
                    <i class="el-icon el-icon-document" />
                    一键申请微信回单
                </button>
                <button
                    class="btn-green download-btn"
                    @click="batchDownloadBill"
                    style="width: 160px;margin-left: 10px"
                >
                    <i class="el-icon el-icon-download" />
                    一键下载微信回单
                </button>
                <export-button class="mg-l-10" @export="onExport">导出名单</export-button>
<!--                <button class="btn" @click="onExport" style="margin-left: 10px">-->
<!--                    <i class="el-icon el-icon-upload2" />-->
<!--                    导出名单-->
<!--                </button>-->
                <button
                    class="btn-red"
                    @click="onStopList"
                    style="margin-left: 10px"
                >
                    <i class="el-icon el-icon-wallet" />
                    停止发薪
                </button>
            </div>
        </div>
        <div class="table">
            <el-table
                :data="tableData"
                style="width: 100%"
                :header-row-style="{ color: '#202536' }"
                :row-style="{ color: '#5E617D' }"
                @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" />
                <el-table-column prop="userName" width="120" label="员工姓名" >
                    <template #default="scope">
                        <div :class="[scope.row.nickName === null ? '' : scope.row.nickName.length + scope.row.userName.length <= 10 ? 'align-items' : '']">
                            <div>
                                {{ scope.row.userName }}
                            </div>
                            <div v-if="scope.row.nickName">
                                <el-tooltip
                                    class="box-item"
                                    effect="dark"
                                    content="此处为备注名"
                                    placement="top-start"
                                >
                                    <div class="nickName">
                                        {{ scope.row.nickName ? '('+ scope.row.nickName +')' : '' }}
                                    </div>
                                </el-tooltip>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="idCardNo" label="身份证号" />
                <el-table-column prop="serveCompanyName" label="派遣单位名" />
                <el-table-column prop="projectName" label="项目名" />
                <el-table-column prop="phone" label="手机号" />
                <el-table-column
                    label="发薪金额"
                    :formatter="(row:{paymentAmount:string}) => row.paymentAmount + '元'"
                />
                <el-table-column prop="payTime" label="发薪时间" />
                <el-table-column prop="getSalaryTime" label="领薪时间" />
                <!-- :width="statusMsg ==='已领取' ? '80' : '160' " -->
                <el-table-column prop="statusMsg" label="领薪状态">
                    <template #default="scope">
                        <p v-if="scope.row.statusMsg !== '停止发薪'">
                            {{ scope.row.statusMsg }}
                        </p>
                        <div v-if="scope.row.statusMsg == '停止发薪'">
                            停止发薪
                            <p style="text-align: center">
                                {{ scope.row.updateTime }}
                            </p>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <p
                            v-if="
                                basicInfo.state === 1 &&
                                    (scope.row.status === 4 ||
                                        scope.row.status === 0)
                            "
                            class="link"
                            @click="stopPay(scope.row.id)"
                        >
                            停止发薪
                        </p>
                        <p
                            v-else-if="
                                scope.row.status === 1 &&
                                    scope.row.billStatus === 0
                            "
                            class="link"
                            @click="
                                applyBill(
                                    scope.row.batchNo,
                                    scope.row.detailOrderNo,
                                    scope.row.id
                                )
                            "
                        >
                            申请回单
                        </p>
                        <p
                            v-else-if="
                                scope.row.status === 1 &&
                                    scope.row.billStatus === 1
                            "
                            class="link"
                            @click="
                                $message.success('回单正在生成中，请耐心等待！')
                            "
                        >
                            回单生成中
                        </p>
                        <p
                            v-else-if="
                                scope.row.status === 1 &&
                                    scope.row.billStatus === 2
                            "
                            @click="
                                downloadBill(
                                    scope.row.batchNo,
                                    scope.row.detailOrderNo,
                                    scope.row.id
                                )
                            "
                            class="link"
                        >
                            下载回单
                        </p>
                        <p v-else>
                            不可操作
                        </p>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                class="pagination"
                v-model:currentPage="pageNum"
                v-model:page-size="pageSize"
                :page-sizes="[10, 20, 30, 50]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            >
            </el-pagination>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import {
    getProcessDetail,
    ProcessDetailDto,
    getProcessWorkers,
    ProcessWorkersDto,
    payScreenType
} from '@/api/pay'
import axios from 'axios'
import { ElLoading } from 'element-plus'
import {
    stopPay,
    applyBill,
    downloadBill,
    batchApplyBill,
    downloadPayrollRecordEle
} from '@/api/operation'
import { exportProcessDeatil } from '@/api/export'
import { dateFormat, confirm } from '@/utils/util'

export default defineComponent({
    name: 'PayDetail',
    data () {
        return {
            pageSize: 10,
            pageNum: 1,
            total: 0,
            tableData: [] as ProcessWorkersDto[],
            month: '',
            basicInfo: {} as ProcessDetailDto,
            selects: [] as string[],
            searchValue: '',
            searchText: '',
            salaryStatus: '',
            salaryStatusArr: [] as { dictLabel: string; dictValue: string }[]
        }
    },
    created () {
        this.month = dateFormat('YYYY-mm', new Date())
        this.onMonth()
        this.getPayScreenType()
    },
    methods: {
        onMonth () {
            this.pageNum = 1
            getProcessDetail({
                id: this.$route.params.id as string
            }).then(res => {
                this.basicInfo = res
                console.log(this.basicInfo, 'basicInfo')
            })
            this.handleCurrentChange()
        },
        handleCurrentChange () {
            console.log(this.salaryStatus, 'salaryStatus')
            getProcessWorkers({
                processId: this.$route.params.id as string,
                pageSize: this.pageSize,
                pageNum: this.pageNum,
                searchText: this.searchValue,
                status: this.salaryStatus === 'ALL' ? null : this.salaryStatus
            }).then(res => {
                this.tableData = res.list
                this.total = res.total
            })
        },
        handleSelectionChange (selects: { id: string }[]) {
            this.selects = selects.map(item => item.id)
        },
        handleSizeChange () {
            this.pageNum = 1
            this.handleCurrentChange()
        },
        search () {
            this.searchValue = this.searchText
            this.pageNum = 1
            this.handleCurrentChange()
        },
        onReset () {
            this.searchText = ''
            this.search()
        },
        async onExport () {
            const result = await exportProcessDeatil({
                processId: this.$route.params.id as string,
                searchText: this.searchValue,
                ids: this.selects.join(',')
            })
            window.location.href =
                process.env.VUE_APP_BASE_URL +
                '/common/download?delete=true&fileName=' +
                result

            this.$message.success('导出成功！')
        },
        async stopPay (id: string) {
            confirm('', '确认停止发薪吗').then(async () => {
                const msg = await stopPay(id)
                this.$message.success(msg)
                this.handleCurrentChange()
            })
        },
        async applyBill (batchNo: string, detailOrderNo: string, id: number) {
            await applyBill({
                batchNo,
                detailOrderNo,
                id
            })
            this.$message.success('回单申请成功，请耐心等待！')
            this.handleCurrentChange()
        },
        async downloadBill (batchNo: string, detailOrderNo: string, id: number) {
            const result = await downloadBill({
                batchNo,
                detailOrderNo,
                id
            })
            console.log(result, 'result')
            // const url =
            //     process.env.VUE_APP_BASE_URL +
            //     '/common/downloadBill?projectName=' +
            //     encodeURI(projectName) +
            //     '&detailOrderNo=' +
            //     detailOrderNo +
            //     '&batchNo=' +
            //     batchNo +
            //     '&download_url=' +
            //     JSON.parse(result).download_url
            window.location.href = result
            this.$message.success('回单下载成功！')
        },

        async batchApplyBill () {
            await batchApplyBill({
                processId: Number(this.$route.params.id),
                ids: this.selects.join(',')
            })
            this.$message.success('已提交批量生成！')
        },
        async batchDownloadBill () {
            // const result = await batchDownloadBill({
            //     processId: Number(this.$route.params.id),
            //     ids: this.selects.join(',')
            // })
            // window.location.href =
            //     process.env.VUE_APP_BASE_URL +
            //         '/common/downloadBatchBill?delete=true&uuid=' +
            //         result

            // this.$message.success('导出成功！')
            this.downloadReceiptOld()
        },
        // 下载微信回单方法
        async downloadReceiptOld () {
            const result = await downloadPayrollRecordEle({
                ids: this.selects.join(',')
            })
            const loading = await ElLoading.service({
                fullscreen: true,
                text: '回单正在下载中，您可以在新界面继续操作'
            })
            const files = await axios({
                url:
                    'https://1403244436326619.cn-shanghai.fc.aliyuncs.com/2016-08-15/proxy/zip-service/zip-oss/',
                method: 'post',
                data: result
            })
            window.location.href = files.data
            await this.$message.success('导出成功！')
            await loading.close()
        },
        onStopList () {
            if (!this.selects.length) {
                this.$message.error('请至少勾选一人！')
                return
            }
            this.stopPay(this.selects.join(','))
        },
        getPayScreenType () {
            payScreenType('saas-pay-get-status').then(res => {
                console.log(res, 'rejrej')
                this.salaryStatusArr = res
            })
        }
    }
})
</script>

<style lang="stylus" scoped>
table()
.header.block{
    padding 20px
}
.basic
    margin-top 20px
.value
    margin-right 30px
.download-btn
    width 120px

.value.important
    color color-red
    font-style italic
.drop-down
    margin-left 10px
.key-bold
    font-weight bold
.nickName
    color #FFC53D
</style>
